<script setup>
import {useRouter} from "vue-router";

const router = useRouter();
const signIn = () => {
  router.push("/user/login");
};
</script>

<template>
  <div class="content myCenter">
    <div class="panel myCenter">
      <h1>已有帐号？</h1>
      <p>请登录🚀</p>
      <button class="login-btn" @click="signIn()">登录</button>
    </div>
  </div>
</template>

<style scoped lang="less">
.content {
  width: 50%;
  height: 100%;
  border-radius: 10px 0 0 10px;
  background: var(--gradualRed);

  .panel {
    width: 100%;
    height: 50%;
    flex-direction: column;

    h1 {
      color: var(--white);
    }

    p {
      color: var(--white);
      font-size: 14px;
      letter-spacing: 1px;
      margin: 20px 0 30px 0;
    }

    button {
      border-radius: 2rem;
      border: 1px solid var(--white);
      background: none;
      color: var(--white);
      font-size: 16px;
      font-weight: bold;
      padding: 12px 45px;
      letter-spacing: 2px;
      cursor: pointer;

      &:hover {
        transition: all 0.5s ease-in-out;
        transform: scale(1.2);
      }
    }
  }
}
</style>